<template>
  <q-layout view="hHh LpR fff">
    <q-header elevated class="bg-primary text-white" height-hint="98">
      <q-toolbar style="justify-content: space-between">
        <div class="flex" style="align-items: center">
          <router-link to="/index" style="color: #fff; text-decoration: solid">
            <q-avatar>
              <img
                src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg"
              />
            </q-avatar>
            首页
          </router-link>
          <q-tabs>
            <q-route-tab to="/course" label="课程信息" />
            <q-route-tab to="/college" label="院校信息" />
            <q-route-tab to="/post" label="贴吧" />
            <q-route-tab v-if="role > 0" to="/manage" label="管理面板" />
          </q-tabs>
        </div>
        <q-item v-if="logged != 'true'" active-class="none" to="/login"
          >登录/注册</q-item
        >
        <q-item v-else active-class="none">
          <q-btn-dropdown
            to="/user"
            :split="true"
            label="个人空间"
            :flat="true"
          >
            <q-list>
              <q-item clickable>
                <q-item-section>更改密码</q-item-section>
              </q-item>
              <q-item to="/login" clickable @click="setUnlogged">
                <q-item-section>更换账号</q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>
        </q-item>
      </q-toolbar>
    </q-header>

    <q-page-container>
      <router-view v-model="logged" />
      <q-page-scroller
        position="bottom-right"
        :scroll-offset="150"
        :offset="[18, 18]"
      >
        <q-btn fab icon="keyboard_arrow_up" color="accent" />
      </q-page-scroller>
    </q-page-container>

    <q-footer elevated class="bg-grey-8 text-white">
      <q-toolbar>
        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
          </q-avatar>
        </q-toolbar-title>
      </q-toolbar>
    </q-footer>
  </q-layout>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";

defineOptions({
  name: "MainLayout",
});
const role = ref(-1);
const logged = ref("false");
const router = useRouter();
function setUnlogged() {
  sessionStorage.setItem("logged", "false");
  sessionStorage.removeItem("token");
  logged.value = "false";
  router.replace({ path: "/" });
  console.log(logged.value, sessionStorage.getItem("logged"));
}
onMounted(() => {
  logged.value = sessionStorage.getItem("logged");
});
watch(logged, () => {
  role.value = sessionStorage.getItem("role");
});
</script>

<style scoped></style>
